<template>
  <div>
    <div class="table-page-search-wrapper">
      <a-row type="flex" justify="space-between" align="middle">
        <a-col :span="16">
          <a-form layout="inline" :model="listQuery">
            <a-form-item label="搜索项">
              <a-input v-model:value="listQuery.title" placeholder="输入名称搜索..." />
            </a-form-item>
            <a-form-item label="所属分类">
              <a-select
                v-model:value="listQuery.cate"
                show-search
                allowClear
                placeholder="请选择分类(支持搜索)"
                style="width: 200px"
                :default-active-first-option="true"
                :show-arrow="true"
                :filter-option="false"
                :options="cateList"
                @search="handleSearch"
                @select="searchSubmit"
              >
                <template #notFoundContent>
                  <a-empty
                    image="https://img.alicdn.com/imgextra/i3/573804794/O1CN01IO097G1lHhdtoisyG_!!573804794.png"
                    :image-style="{
                      height: '90px'
                    }"
                  >
                    <template #description>
                      <view style="color: rgba(0, 0, 0, 0.88); padding-top: 20px">
                        暂无可用项，请先
                        <router-link :to="{ name: 'ScheduleCate' }" target="_blank"
                          >添加</router-link
                        >
                      </view>
                    </template>
                  </a-empty>
                </template>
              </a-select>
            </a-form-item>
            <a-form-item label="日程状态">
              <a-select
                v-model:value="listQuery.status"
                placeholder="请选择"
                style="width: 180px"
                @select="searchSubmit"
              >
                <a-select-option key="" value=""> 全部 </a-select-option>
                <a-select-option key="wc" value="wc"> 已完成 </a-select-option>
                <a-select-option key="wwc" value="wwc"> 未完成 </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="searchSubmit"> 搜索 </a-button>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="8">
          <div style="margin-right: 0px; float: right; display: flex; align-item: center">
            <a-tooltip placement="top">
              <template #title>
                <span>刷新列表</span>
              </template>
              <a-button @click="reloadList">
                <template #icon><SyncOutlined /></template>
              </a-button>
            </a-tooltip>
            <a-button
              v-permission="{ action: 'log_site_add' }"
              type="primary"
              style="margin-left: 12px"
              @click="log_site_add"
            >
              <template #icon><PlusOutlined /></template> 新增日程
            </a-button>
          </div>
        </a-col>
      </a-row>
    </div>
    <a-spin tip="加载中..." :spinning="loading">
      <div id="calendar"></div>
    </a-spin>
    <a-drawer
      width="50%"
      title="日程详情"
      placement="right"
      :open="drawerShow"
      @close="
        () => {
          drawerShow = false
        }
      "
    >
      <template #extra>
        <a-button
          style="margin-right: 8px"
          @click="
            () => {
              drawerShow = false
            }
          "
          >取消</a-button
        >
        <a-button type="primary" :loading="submitLoading" @click="addItem">提交</a-button>
      </template>
      <a-form
        ref="formRef"
        :model="FormState"
        :rules="FormRule"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-form-item label="日程分类" has-feedback required name="cate">
          <a-select
            v-model:value="FormState.cate"
            show-search
            allowClear
            placeholder="请选择分类(支持搜索)"
            style="width: 100%"
            :default-active-first-option="true"
            :show-arrow="true"
            :filter-option="false"
            :options="cateList"
            @search="handleSearch"
          >
            <template #notFoundContent>
              <a-empty
                image="https://img.alicdn.com/imgextra/i3/573804794/O1CN01IO097G1lHhdtoisyG_!!573804794.png"
                :image-style="{
                  height: '90px'
                }"
              >
                <template #description>
                  <view style="color: rgba(0, 0, 0, 0.88); padding-top: 20px">
                    暂无可用项，请先
                    <router-link :to="{ name: 'ScheduleCate' }" target="_blank">添加</router-link>
                  </view>
                </template>
              </a-empty>
            </template>
          </a-select>
        </a-form-item>
        <a-form-item label="日程内容" has-feedback required name="content">
          <a-textarea v-model:value="FormState.content" placeholder="请输入日程内容" :rows="10" />
        </a-form-item>
        <a-form-item label="日程背景色" name="color">
          <ColorPicker
            theme="light"
            :color="FormState.color"
            :sucker-hide="true"
            @changeColor="changeColorSlide"
          />
        </a-form-item>
        <div
          style="
            border: 1px dashed #1677ff;
            padding-top: 24px;
            margin-bottom: 24px;
            border-radius: 7px;
          "
        >
          <a-form-item label="日期类别" has-feedback required name="date_type">
            <a-radio-group v-model:value="FormState.date_type" name="date_type">
              <a-radio-button key="gl" value="gl">公历(阳历)</a-radio-button>
              <a-radio-button key="nl" value="nl">农历(阴历)</a-radio-button>
            </a-radio-group>
          </a-form-item>
          <a-form-item
            v-if="FormState.date_type == 'nl'"
            label="日程日期"
            has-feedback
            required
            name="start_date"
          >
            <a-date-picker
              v-model:value="FormState.start_date"
              placeholder="请选择日程日期"
              style="width: 100%"
            />
          </a-form-item>
          <a-form-item v-if="FormState.date_type == 'nl'" label="日程时间" name="start_time">
            <a-time-picker
              v-model:value="FormState.start_time"
              value-format="HH:mm:ss"
              placeholder="(可选)"
              style="width: 100%"
            />
          </a-form-item>
          <a-form-item
            v-if="FormState.date_type == 'gl'"
            label="开始日程日期"
            has-feedback
            required
            name="start_date"
          >
            <a-date-picker
              v-model:value="FormState.start_date"
              placeholder="请选择日程日期"
              style="width: 100%"
            />
          </a-form-item>
          <a-form-item v-if="FormState.date_type == 'gl'" label="开始日程时间" name="start_time">
            <a-time-picker
              v-model:value="FormState.start_time"
              value-format="HH:mm:ss"
              placeholder="(可选)"
              style="width: 100%"
            />
          </a-form-item>
          <a-form-item v-if="FormState.date_type == 'gl'" label="结束日程日期" name="end_date">
            <a-date-picker
              v-model:value="FormState.end_date"
              placeholder="请选择日程日期(可选，默认与开始日程日期相同)"
              style="width: 100%"
            />
          </a-form-item>
          <a-form-item v-if="FormState.date_type == 'gl'" label="结束日程时间" name="end_time">
            <a-time-picker
              v-model:value="FormState.end_time"
              value-format="HH:mm:ss"
              placeholder="(可选，默认与开始日程时间相同)"
              style="width: 100%"
            />
          </a-form-item>
        </div>
        <div
          style="
            border: 1px dashed #1677ff;
            padding-top: 24px;
            margin-bottom: 24px;
            border-radius: 7px;
          "
        >
          <a-form-item label="是否重复" has-feedback required name="is_loop">
            <a-radio-group v-model:value="FormState.is_loop" name="is_loop">
              <a-radio-button :key="1" :value="1">重复</a-radio-button>
              <a-radio-button :key="0" :value="0">不重复</a-radio-button>
            </a-radio-group>
          </a-form-item>
          <a-form-item v-if="FormState.is_loop == 1" label="重复周期">
            <a-input-group compact>
              <a-input
                v-model:value="FormState.loop_num"
                addon-before="每"
                style="width: 80%"
                placeholder="请输入周期数"
              />
              <a-select
                v-model:value="FormState.loop_type"
                style="width: 20%"
                placeholder="请选择周期类型"
              >
                <a-select-option v-if="FormState.date_type == 'gl'" value="hour"
                  >小时</a-select-option
                >
                <a-select-option v-if="FormState.date_type == 'gl'" value="day">天</a-select-option>
                <a-select-option v-if="FormState.date_type == 'gl'" value="week"
                  >周</a-select-option
                >
                <a-select-option v-if="FormState.date_type == 'gl'" value="month"
                  >月</a-select-option
                >
                <a-select-option value="year">年</a-select-option>
              </a-select>
            </a-input-group>
          </a-form-item>
        </div>
        <a-form-item label="重要程度" has-feedback required name="importance">
          <a-radio-group v-model:value="FormState.importance" name="importance">
            <a-radio-button value="di">低</a-radio-button>
            <a-radio-button value="zhong">中</a-radio-button>
            <a-radio-button value="gao">高</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <div
          style="
            border: 1px dashed #1677ff;
            padding-top: 24px;
            margin-bottom: 24px;
            border-radius: 7px;
          "
        >
          <a-form-item label="是否发送通知" has-feedback required name="notice_open">
            <a-radio-group v-model:value="FormState.notice_open" name="notice_open">
              <a-radio :key="1" :value="1">发送</a-radio>
              <a-radio :key="0" :value="0">不发送</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item
            v-if="FormState.notice_open == 1"
            label="通知配置"
            has-feedback
            required
            name="ps_id"
          >
            <a-select v-model:value="FormState.ps_id" placeholder="请选择通知推送配置">
              <a-select-option v-for="d in allPush" :key="d._id" :value="d._id">
                {{ d.title }}
              </a-select-option>
              <template #notFoundContent>
                <a-empty
                  image="https://img.alicdn.com/imgextra/i3/573804794/O1CN01IO097G1lHhdtoisyG_!!573804794.png"
                  :image-style="{
                    height: '90px'
                  }"
                >
                  <template #description>
                    <view style="color: rgba(0, 0, 0, 0.88); padding-top: 20px">
                      暂无可用配置，请先
                      <router-link :to="{ name: 'pushServer' }" target="_blank"
                        >添加配置</router-link
                      >
                    </view>
                  </template>
                </a-empty>
              </template>
            </a-select>
          </a-form-item>
          <a-form-item v-if="FormState.notice_open == 1" label="提前通知天数">
            <a-input
              v-model:value="FormState.before_num"
              addon-before="提前"
              addon-after="天"
              style="width: 100%"
              placeholder="请输入提前通知的天数，不提前请填0"
            />
          </a-form-item>
        </div>
        <a-form-item label="备注" name="desc">
          <a-textarea v-model:value="FormState.desc" show-count placeholder="(可选)" :rows="2" />
        </a-form-item>
      </a-form>
    </a-drawer>
    <a-drawer
      width="50%"
      title="日程操作日志"
      placement="right"
      :open="operateLogShow"
      @close="
        () => {
          operateLogShow = false
        }
      "
    >
      <template #extra>
        <a-button
          style="margin-right: 8px"
          @click="
            () => {
              operateLogShow = false
            }
          "
          >取消</a-button
        >
      </template>
      <a-spin tip="Loading..." :spinning="operateLogLoading">
        <a-empty
          v-if="logListData.length == 0"
          image="https://img.alicdn.com/imgextra/i3/573804794/O1CN01IO097G1lHhdtoisyG_!!573804794.png"
          :image-style="{
            height: '90px'
          }"
        >
          <template #description>
            <view style="color: rgba(0, 0, 0, 0.88); padding-top: 20px"> 暂无日志 </view>
          </template>
        </a-empty>
        <a-timeline v-else mode="left">
          <a-timeline-item v-for="(item, index) in logListData" :key="index"
            ><template v-if="index == 0" #dot
              ><arrow-up-outlined style="font-size: 16px"
            /></template>
            <p>时间：{{ item.time }}</p>
            <p>
              状态：<a-tag v-if="item.status == 1" color="green">已完成</a-tag
              ><a-tag v-else color="red">未完成</a-tag>
            </p>
            <p>备注：{{ item.beizhu || '-' }}</p>
          </a-timeline-item>
        </a-timeline>
      </a-spin>
    </a-drawer>
    <a-modal
      v-model:open="modal2Visible"
      title="日程处理"
      centered
      :width="660"
      :footer="null"
      @ok="modal2Visible = false"
    >
      <div>
        <div style="font-size: 15px; margin-top: 15px">日程内容：{{ eventData.title }}</div>
        <div style="font-size: 15px; margin-top: 5px">
          最近操作时间：{{ FormState.operate_time || '-' }}
        </div>
        <div style="font-size: 15px; margin-top: 5px">
          最近操作备注：{{ FormState.beizhu || '-' }}
        </div>
        <div
          style="
            display: flex;
            width: 100%;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            margin-top: 30px;
          "
        >
          <a-button type="link" @click="editEvent"
            ><template #icon><EditOutlined /></template>编辑</a-button
          >
          <a-button type="link" danger @click="delEvent"
            ><template #icon><DeleteOutlined /></template>删除</a-button
          >
          <a-popconfirm :disabled="FormState.is_loop === 1" title="备注" @confirm="changeStatus(0)">
            <template #description>
              <a-textarea v-model:value="beizhu" placeholder="(可选)" :rows="4" />
            </template>
            <a-button type="primary" ghost danger :disabled="FormState.is_loop === 1"
              ><template #icon><ClockCircleOutlined /></template>标为未完成</a-button
            >
          </a-popconfirm>
          <a-popconfirm title="备注" @confirm="changeStatus(1)">
            <template #description>
              <a-textarea v-model:value="beizhu" placeholder="(可选)" :rows="4" />
            </template>
            <a-button type="primary" ghost
              ><template #icon><CheckCircleOutlined /></template>标为已完成</a-button
            >
          </a-popconfirm>
          <a-button type="link" @click="operateLog">操作日志</a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, ref, toRaw } from 'vue'
import {
  Row,
  Col,
  Modal,
  Divider,
  Drawer,
  DatePicker,
  TimePicker,
  Timeline,
  TimelineItem,
  Popconfirm,
  Card,
  Tooltip,
  Statistic,
  Spin,
  RadioGroup,
  RangePicker,
  Calendar
} from 'ant-design-vue'
import {
  SyncOutlined,
  PlusOutlined,
  EditOutlined,
  CopyOutlined,
  CheckCircleOutlined,
  ClockCircleOutlined,
  DeleteOutlined,
  ArrowUpOutlined,
  QuestionCircleOutlined,
  ExclamationCircleOutlined,
  DownOutlined
} from '@ant-design/icons-vue'
import { requestSuccess, requestFailed } from '@/utils/feedback'
import {
  getOnlyCateList,
  editScheduleInfo,
  getList,
  getScheduleInfo,
  getScheduleLogList,
  statusSchedule,
  delSchedule
} from '@/api/schedule'
import { useRouter } from 'vue-router'
import { formatToDate } from '@/utils/common'
import { getAllServerList as getPushServerList } from '@/api/push'
import dayjs from 'dayjs'
import { ColorPicker } from 'vue-color-kit'

export default defineComponent({
  name: 'Calendar',
  components: {
    ColorPicker,
    SyncOutlined,
    PlusOutlined,
    EditOutlined,
    CheckCircleOutlined,
    ArrowUpOutlined,
    ClockCircleOutlined,
    CopyOutlined,
    ExclamationCircleOutlined,
    QuestionCircleOutlined,
    DownOutlined,
    DeleteOutlined,
    [Row.name]: Row,
    [TimelineItem.name]: TimelineItem,
    [Timeline.name]: Timeline,
    [DatePicker.name]: DatePicker,
    [TimePicker.name]: TimePicker,
    [Popconfirm.name]: Popconfirm,
    [Spin.name]: Spin,
    [Calendar.name]: Calendar,
    [Card.name]: Card,
    [Tooltip.name]: Tooltip,
    [Modal.name]: Modal,
    [RadioGroup.name]: RadioGroup,
    [RangePicker.name]: RangePicker,
    [Divider.name]: Divider,
    [Statistic.name]: Statistic,
    [Drawer.name]: Drawer,
    [Col.name]: Col
  },
  setup() {
    const formRef = ref()
    const router = useRouter()
    const dateFormat = 'YYYY-MM-DD'
    const state = reactive<any>({
      loading: true,
      drawerShow: false,
      submitLoading: false,
      operateLogShow: false,
      operateLogLoading: false,
      modal2Visible: false,
      dataList: {},
      beizhu: '',
      eventData: {},
      cateList: [],
      logListData: [],
      selectedRowKeys: [],
      selectedKeysPage: {},
      allPush: [],
      totalData: {},
      calendarOptions: {
        //   timeGridPlugin  可显示每日时间段
        height: '82vh',
        views: {
          //对应月视图
          dayGridMonth: {
            displayEventTime: false, //是否显示时间
            dayCellContent(item) {
              let _date = formatToDate(item.date).split('-')
              let _dateF = (window as any).calendar.solar2lunar(_date[0], _date[1], _date[2])
              return {
                html: `<div style="text-align: center;"><div style="font-size: 20px; line-height: 20px">${
                  _dateF.cDay
                }</div><div style="font-size: 12px; color: rgba(30,31,36,.5)">${
                  _dateF.Term
                    ? _dateF.Term
                    : _dateF.IDayCn == '初一'
                    ? _dateF.IMonthCn
                    : _dateF.IDayCn
                }</div></div>`
              }
            }
          }
        },
        // plugins: [(window as any).dayGridPlugin, (window as any).interactionPlugin],
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'multiMonthYear,dayGridMonth,dayGridWeek,dayGrid'
        },
        buttonText: {
          // 设置按钮
          year: '年',
          today: '今天',
          month: '月',
          week: '周',
          dayGrid: '天'
        },
        // allDaySlot: false,
        editable: true,
        selectable: true,
        navLinks: true,
        // displayEventEnd: true,//所有视图显示结束时间
        initialView: 'dayGridMonth', // 设置默认显示月，可选周、日
        dateClick: handleDateClick,
        eventClick: handleEventClick,
        // timezone
        // 设置日程
        events: [],
        eventColor: true, // 修改日程背景色
        locale: 'zh-cn', // 设置语言
        weekNumberCalculation: 'ISO', // 周数
        customButtons: {
          prev: {
            // this overrides the prev button
            text: 'PREV',
            click: () => {
              prev()
            }
          },
          next: {
            // this overrides the next button
            text: 'PREV',
            click: () => {
              next()
            }
          },
          today: {
            text: '今天',
            click: () => {
              today()
            }
          }
        }
      },
      calendarApi: null,
      calendarMode: 'month',
      listQuery: {
        pageNo: 1,
        pageSize: 15,
        date_range: [],
        date_range_format: [],
        cate: ''
      },
      pagination: {
        pageSizeOptions: ['15', '30', '50'],
        showSizeChanger: true,
        total: 1,
        showTotal: (total) => `共 ${total} 条数据`,
        pageSize: 15,
        current: 1
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      columns: [
        {
          title: 'ID',
          dataIndex: '_id'
        },
        {
          title: '站点名',
          dataIndex: 'title'
        },
        {
          title: '消息推送',
          dataIndex: 'notice_open',
          slots: { customRender: 'notice_open' }
        },
        {
          title: '推送配置',
          dataIndex: 'push_server_title'
        },
        {
          title: '状态',
          dataIndex: 'status',
          slots: { customRender: 'status' }
        },
        {
          title: '创建时间',
          dataIndex: 'create_time'
        },
        {
          title: '备注',
          dataIndex: 'desc'
        },
        {
          title: '操作',
          width: '280px',
          slots: { customRender: 'action' }
        }
      ]
    })
    onMounted(() => {
      if (
        router.currentRoute.value.query.cate != undefined &&
        router.currentRoute.value.query.cate.length > 0
      ) {
        state.listQuery.cate = router.currentRoute.value.query.cate
      }
      getCateAll('')
      getServerDataList()
      setTimeout(() => {
        initFullCalendar()
      }, 1000)
    })
    function initFullCalendar() {
      var calendarEl = document.getElementById('calendar') as HTMLElement
      state.calendarApi = new (window as any).FullCalendar.Calendar(
        calendarEl,
        state.calendarOptions
      )
      state.calendarApi.render()
      getShowTime()
    }
    function prev() {
      state.calendarApi.prev()
      getShowTime()
    }
    // 切换下一个按钮日程
    function next() {
      state.calendarApi.next()
      getShowTime()
    }
    function getShowTime() {
      state.listQuery.date_range_format = [
        state.calendarApi.view.currentStart.getTime(),
        state.calendarApi.view.currentEnd.getTime()
      ]
      getDataList()
    }
    // 点击今天按钮
    function today() {
      state.calendarApi.today()
      getShowTime()
    }
    function getServerDataList() {
      getPushServerList({}).then((res) => {
        state.allPush = res
      })
    }
    function handleDateClick(e) {
      FormState.start_date = dayjs(e.dateStr, dateFormat)
    }
    function handleEventClick(e) {
      const serverData = e.event.id
      state.modal2Visible = true
      state.eventData = state.dataList[serverData]
      getScheduleInfo({ id: serverData }).then((res) => {
        res.start_date = dayjs(res['start_date'], dateFormat)
        res.end_date = dayjs(res['end_date'], dateFormat)
        for (let item in FormState) {
          FormState[item] = ''
        }
        for (let item in res) {
          FormState[item] = res[item]
        }
      })
    }
    function editEvent() {
      state.drawerShow = true
      state.modal2Visible = false
    }
    function changeColorSlide(hex) {
      FormState.color = hex.hex
    }
    const FormState = reactive({
      content: '',
      start_date: dayjs(),
      end_date: dayjs(),
      ps_id: '',
      cate: '',
      color: '',
      desc: '',
      start_time: '',
      end_time: '',
      loop_num: '',
      loop_type: '',
      date_type: 'gl',
      is_loop: 0,
      notice_open: 0,
      before_num: 0,
      importance: 'di'
    })
    const FormRule = {
      content: [{ required: true, message: '请输入日程内容', trigger: ['blur', 'change'] }],
      importance: [{ required: true, message: '请选择重要程度', trigger: ['blur', 'change'] }],
      date_type: [{ required: true, message: '请选择日期类型', trigger: ['blur', 'change'] }],
      is_loop: [{ required: true, message: '请选择是否重复', trigger: ['blur', 'change'] }],
      date: [{ required: true, message: '请选择日程日期', trigger: ['blur', 'change'] }]
    }

    function handleSearch(e) {
      getCateAll(e)
    }
    function getCateAll(keyword) {
      getOnlyCateList({ title: keyword }).then((res) => {
        state.cateList = res
        console.log(state.listQuery.cate)
        if (
          state.listQuery.cate.length === undefined ||
          state.listQuery.cate.length === 'undefined' ||
          state.listQuery.cate.length === 0
        ) {
          for (let index = 0; index < res.length; index++) {
            if (res[index].is_default != undefined && res[index].is_default == 1) {
              state.listQuery.cate = res[index]._id
            }
          }
        }
      })
    }

    function reloadList() {
      state.loading = true
      state.listQuery.pageNo = 1
      state.pagination.current = 1
      getShowTime()
    }

    function searchSubmit() {
      state.loading = true
      state.listQuery.pageNo = 1
      state.pagination.current = 1
      getShowTime()
    }
    function log_site_add() {
      for (let item in FormState) {
        if (item != 'start_date') {
          if (item == 'date_type') {
            FormState[item] = 'gl'
          } else if (item == 'is_loop' || item == 'notice_open' || item == 'before_num') {
            FormState[item] = 0
          } else if (item == 'importance') {
            FormState[item] = 'di'
          } else if (item == 'cate') {
            FormState[item] = state.listQuery.cate
          } else {
            FormState[item] = ''
          }
        }
      }
      state.drawerShow = true
    }
    function operateLog() {
      state.operateLogShow = true
      state.logListData = []
      state.operateLogLoading = true
      getScheduleLogList({ id: FormState['_id'] }).then((res) => {
        state.operateLogLoading = false
        state.logListData = res
      })
    }

    function getDataList() {
      state.loading = true
      getList(state.listQuery).then((res) => {
        state.loading = false
        state.calendarApi.removeAllEvents()
        // 只添加新的日程
        state.calendarApi.addEventSource(res)
        for (let index = 0; index < res.length; index++) {
          const element = res[index]
          state.dataList[element['id']] = element
        }
      })
    }
    const addItem = () => {
      formRef.value
        .validate()
        .then(() => {
          state.submitLoading = true
          FormState['start_date_str'] = FormState['start_date'].format('YYYY-MM-DD')
          if (FormState['end_date'] && FormState['end_date'] != dayjs()) {
            FormState['end_date_str'] = FormState['end_date'].format('YYYY-MM-DD')
          }
          editScheduleInfo(toRaw(FormState))
            .then((res) => {
              if (res.code === 200) {
                requestSuccess(res)
                formRef.value.resetFields()
                state.loading = true
                state.drawerShow = false
                state.modal2Visible = false
                reloadList()
              } else {
                requestFailed(res)
              }
            })
            .finally(() => {
              state.submitLoading = false
            })
        })
        .catch((e) => {
          console.log(e)
          return false
        })
    }
    function delEvent() {
      Modal.confirm({
        title: '确认删除日程?',
        content: '【' + FormState.content + '】',
        okType: 'danger',
        okText: '确认删除',
        onOk() {
          delSchedule({ id: FormState['_id'] }).then((res) => {
            if (res.code === 200) {
              state.loading = true
              state.modal2Visible = false
              getDataList()
              requestSuccess(res)
            } else {
              requestFailed(res)
            }
          })
        }
      })
    }
    function changeStatus(status) {
      statusSchedule({ id: FormState['_id'], status: status, beizhu: state.beizhu }).then((res) => {
        if (res.code === 200) {
          state.beizhu = ''
          state.loading = true
          state.modal2Visible = false
          getDataList()
          requestSuccess(res)
        } else {
          requestFailed(res)
        }
      })
    }
    const onSelectChange = (selectedRowKeys) => {
      state.selectedKeysPage[state.listQuery.pageNo] = selectedRowKeys
      let nowList: any[] = []
      for (const key in state.selectedKeysPage) {
        nowList = nowList.concat(state.selectedKeysPage[key])
      }
      const uniqueList = [...new Set(nowList)]
      state.selectedRowKeys = uniqueList
    }
    return {
      ...toRefs(state),
      onSelectChange,
      reloadList,
      searchSubmit,
      handleSearch,
      editEvent,
      operateLog,
      changeStatus,
      delEvent,
      formRef,
      log_site_add,
      changeColorSlide,
      FormState,
      addItem,
      FormRule,
      router,
      getDataList
    }
  }
})
</script>

<style>
:root {
  --fc-small-font-size: 1em;
  --fc-border-color: rgba(5, 5, 5, 0.06);
  --fc-today-bg-color: #1677ff1f;
  --fc-button-bg-color: #ffffff;
  --fc-button-border-color: #d9d9d9;
  --fc-button-active-bg-color: #1677ff;
  --fc-button-active-border-color: #1677ff;
  --fc-button-hover-bg-color: #1677ff;
  --fc-button-hover-border-color: #1677ff;
  --fc-button-text-color: #000000e0;
}
.hu-color-picker {
  width: 218px !important;
}
.fc .fc-button-primary:disabled:hover {
  color: #333 !important;
}
.fc .fc-col-header-cell-cushion {
  display: inline-block;
  padding: 10px 0px;
  font-weight: bold;
  font-size: 1.15em;
  color: rgba(0, 0, 0, 0.88);
}
.fc .fc-daygrid-day-number {
  font-size: 1.1em;
}
.fc-button-active {
  color: #ffffff !important;
}
.fc .fc-button-primary:hover {
  color: #ffffff !important;
}
.fc-icon {
  line-height: 0.9;
  width: 1.5em;
}
.fc .fc-button {
  padding: 0.4em 1.5em;
}
.finish_event {
  background-color: #efefef;
  border: none;
}
.fc-button:focus {
  box-shadow: none !important;
}
.finish_event .fc-event-title {
  color: #888;
  text-decoration: line-through;
}
</style>
